<template>
	<swiper :style="{ '--color': vuex_config.themeColor1 }" v-if="dataList.length > 0" @touchmove="stopMove"
		@change="judgeMore" class="part_box" vertical circular :display-multiple-items="5" :autoplay="true"
		:interval="1000">
		<swiper-item class="recor_item" v-for="(item, index) in dataList" :key="item.fk_users_id">
			<view class="headimg">
				<image :src="item.headimgurl" mode="aspectFill"></image>
			</view>
			<view class="nick_name">{{ item.uname || item.nickname }}</view>
			<view class="time">{{ item.date_creation | formatTime() }}</view>
			<view class="ri-text">参与了活动</view>
		</swiper-item>
		<template v-if="dataList.length < 5">
			<swiper-item class="result-item" v-for="(item, index) in (5 - dataList.length)" :key="indexobj[index]"></swiper-item>
		</template>
	</swiper>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pagingMixin],
		props: {
			formId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				indexobj: {
					0: 'x0',
					1: 'x1',
					2: 'x2',
					3: 'x3',
					4: 'x4',
				}
			};
		},
		filters: {
			formatTime(val) {
				return formatDate(val, 'YYYY-MM-DD HH:mm');
			}
		},
		mounted() {
			this._init_data('GetCustomFormValList', {
				pk_id: this.formId
			});
		},
		methods: {
			stopMove() {
				return false;
			},
			// 是否加载更多
			judgeMore(e) {
				let index = e.detail.current;
				if (index > this.dataList.length - 4 && !this.dataListParams.loading) {
					this._load_data();
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.part_box {
		background-color: #fff;
		padding: 20rpx;
		height: 280rpx;

		.recor_item {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #333;

			.headimg {
				width: 36rpx;
				height: 36rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.nick_name {
				color: var(--color);
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.time {
				margin: 0 10rpx;
			}

			.ri-text {
				line-height: 40rpx;
			}
		}
	}
</style>
